<script setup>
  import axios from 'axios'
  import { reactive, ref, computed, watch } from 'vue'

  let nowTime = -(-String(new Date()).slice(16, 18))

  const weather = reactive({
    city: '...загрузка',
    temp: '...загрузка',
    temp3: '...загрузка',
    feels_like: '...загрузка',
    humidity: '...загрузка',
    weath: '...загрузка',
    wind: '...загрузка',
    rain: '...загрузка',
  })

  let rightLeft = ref(0)
  let spinner = ref(0)
  let chekCityx = ref(0)
  let chekCityy = ref(0)

  let city = {
    pavshinox: 55.816511,
    pavshinoy: 37.344534,

    volgogradx: 48.7194,
    volgogrady: 44.5018,

    voljx: 48.7858,
    voljy: 44.7797,

    krasnodarx: 45.0448,
    krasnodary: 38.976,
  }
  chekCityx = city.pavshinox
  chekCityy = city.pavshinoy

  watch(rightLeft, (rightLeft) => {
    spinner = 1
    switch (rightLeft) {
      case 0:
        chekCityx = city.pavshinox
        chekCityy = city.pavshinoy
        break
      case 1:
        chekCityx = city.volgogradx
        chekCityy = city.volgogrady
        break
      case 2:
        chekCityx = city.voljx
        chekCityy = city.voljy
        break
      case 3:
        chekCityx = city.krasnodarx
        chekCityy = city.krasnodary
        break
    }
  })
  let but = function () {
    axios
      .get(
        'https://api.openweathermap.org/data/2.5/forecast?lat=' +
          chekCityx +
          '&lon=' +
          chekCityy +
          '&appid=59dcec1e0c26c4b566e7da66bf33f6c7&lang=ru&units=metric',
      )
      .then((response) => {
        weather.city = response.data.city.name
        weather.temp = Math.round(response.data.list[0].main.temp)
        weather.feels_like = Math.round(response.data.list[0].main.feels_like)
        weather.humidity = response.data.list[0].main.humidity

        weather.weath = response.data.list[0].weather[0].icon

        weather.wind = Math.round(response.data.list[0].wind.speed)

        weather.rain = response.data.list[0].pop

        weather.temp3 = Math.round(response.data.list[1].main.temp)
        weather.rain3 = response.data.list[1].pop
        weather.wind3 = Math.round(response.data.list[1].wind.speed)

        weather.temp6 = Math.round(response.data.list[2].main.temp)
        weather.rain6 = response.data.list[2].pop
        weather.wind6 = Math.round(response.data.list[2].wind.speed)
      })
    spinner = 0
  }
  but()

  let fun = function () {
    setTimeout(but, 500)
  }
</script>

<template>
  <div class="relative">
    <div
      class="absolute z-50 h-full w-full bg-white pt-36 text-center"
      v-if="spinner"
    >
      ...загрузка
    </div>

    <div>
      <div class="mx-auto flex justify-center pt-4">
        <button @click="rightLeft--, fun()" v-show="rightLeft > 0"><</button>

        <h3 class="pl-5 pr-5">{{ weather.city }}</h3>

        <button @click="rightLeft++, fun()" v-show="rightLeft < 3">></button>
      </div>

      <div class="flex justify-between p-6">
        <h4 class="">сейчас:</h4>
        <div class="flex">
          <p>{{ weather.temp }}</p>
          <span>°C</span>
        </div>
      </div>

      <div class="flex justify-between pl-6 pr-6">
        <h4 class="">ощущается:</h4>
        <div class="flex">
          <p>{{ weather.feels_like }}</p>
          <span>°C</span>
        </div>
      </div>

      <div class="flex justify-between pl-6 pr-6">
        <h4 class="">влажность:</h4>
        <div class="flex">
          <p>{{ weather.humidity }}</p>
          <span>%</span>
        </div>
      </div>

      <div class="flex justify-between pl-6 pr-6">
        <h4 class="pt-4">на небе:</h4>
        <div class="flex">
          <img
            v-bind:src="
              'https://openweathermap.org/img/wn/' + weather.weath + '.png'
            "
            alt="Погода"
          />
        </div>
      </div>

      <div class="flex justify-between pl-6 pr-6">
        <h4 class="">ветер:</h4>
        <div class="flex">
          <p>{{ weather.wind }}</p>
          <span>м/с</span>
        </div>
      </div>

      <div class="flex justify-between pl-6 pr-6">
        <h4 class="">шанс дождя:</h4>
        <div class="flex">
          <p>{{ weather.rain }}</p>
          <span>%</span>
        </div>
      </div>

      <hr />

      <div class="pb-3 pl-6 pr-6 pt-3">
        <div class="flex justify-between">
          <h4 v-if="nowTime === 22">после 01:00</h4>
          <h4 v-else-if="nowTime === 23">после 02:00</h4>
          <h4 v-else class="">после {{ nowTime + 3 }}:00</h4>

          <div class="flex">
            <p>{{ weather.temp3 }}</p>
            <span>°C</span>
          </div>
        </div>
        <div class="flex justify-between">
          <h4 class="">ветер:</h4>
          <div class="flex">
            <p>{{ weather.wind3 }}</p>
            <span>м/с</span>
          </div>
        </div>
        <div class="flex justify-between">
          <h4 class="">шанс дождя:</h4>
          <div class="flex">
            <p>{{ weather.rain3 }}</p>
            <span>%</span>
          </div>
        </div>
      </div>

      <hr />

      <div class="pb-3 pl-6 pr-6 pt-3">
        <div class="flex justify-between">
          <h4 v-if="nowTime === 19">после 01:00</h4>
          <h4 v-else-if="nowTime === 20">после 02:00</h4>
          <h4 v-else-if="nowTime === 21">после 03:00</h4>
          <h4 v-else-if="nowTime === 22">после 04:00</h4>
          <h4 v-else-if="nowTime === 23">после 05:00</h4>
          <h4 v-else>после {{ nowTime + 6 }}:00</h4>
          <div class="flex">
            <p>{{ weather.temp6 }}</p>
            <span>°C</span>
          </div>
        </div>
        <div class="flex justify-between">
          <h4 class="">ветер:</h4>
          <div class="flex">
            <p>{{ weather.wind6 }}</p>
            <span>м/с</span>
          </div>
        </div>
        <div class="flex justify-between">
          <h4 class="">шанс дождя:</h4>
          <div class="flex">
            <p>{{ weather.rain6 }}</p>
            <span>%</span>
          </div>
        </div>
      </div>

      <hr />
    </div>
  </div>
</template>
